// import React, { Component } from 'react';
// import { BrowserRouter, Switch, Route, Link, useRouteMatch, useParams } from 'react-router-dom';

//designer.js
import React, { Component } from 'react';
import {Layout, Button, Tooltip ,Select,Input,Row, Col} from 'antd';
import '../App.css';
import { CopyOutlined ,SearchOutlined,
    AlignLeftOutlined,AlignCenterOutlined,AlignRightOutlined,
    InsertRowAboveOutlined,InsertRowBelowOutlined,
    InsertRowLeftOutlined,InsertRowRightOutlined,
    DeleteRowOutlined ,DeleteColumnOutlined,
    FileAddOutlined,BoldOutlined ,ItalicOutlined,UnderlineOutlined,
    TableOutlined,BorderTopOutlined,BorderRightOutlined,BorderBottomOutlined,BorderLeftOutlined,
    SmallDashOutlined,BorderOutlined,DragOutlined,SaveOutlined,RollbackOutlined,FundViewOutlined,
    FormOutlined
} from '@ant-design/icons';

import {Link} from "react-router-dom";


const { Header, Content, Footer } = Layout;
const { Option } = Select;

export default class EditReport_Grid extends Component {

    constructor(props) {
        super(props);
        this.state = {
            initValues: null,  // 初始值
            modalTitle: '',
        };
    }



    workbookRef=(ref)=>{
        this.workbook = ref
    }

    //保存表
    saveTable=()=>{
        let _report_id=this.props.match.params.id
        //this.workbook.saveTable(_report_id);
    }


    //追加行
    appendRow=()=>{
       // this.workbook.appendRow();
    }
    insertRow=()=>{
       //this.workbook.insertRow();
    }
    deleteRow=()=>{
        //this.workbook.deleteRow();
    }


    //追加列
    appendCol=()=>{
       // this.workbook.appendCol();
    }
    insertCol=()=>{
       // this.workbook.insertCol();
    }
    deleteCol=()=>{
       // this.workbook.deleteCol();
    }
    align=(d)=>{
        //this.workbook.align(d);
    };
    editFont=(t)=>{
       // this.workbook.editFont(t);
    }

    viewReport=(id)=>{




}

    //选择字体
    handleFontChange=(value)=>{
        let t=101;
        switch(value) {
            case 'microYH':
                t=101;
                break;
            case 'st':
                t=102;
                break;
            case 'xst':
                t=103;
                break;
            case 'ht':
                t=104;
                break;
            case 'fs':
                t=105;
                break;
            case 'kt':
                t=106;
                break;
            default:
                t=101;
        }
        // this.workbook.editFont(t);
    }
    //选择字体
    handleFontSizeChange=(value)=>{
        let t=201;
        switch(value) {
            case 'medium':
                t=201;
                break;
            case 'small':
                t=202;
                break;
            case 'large':
                t=203;
                break;
            case 'x-small':
                t=204;
                break;
            case 'x-large':
                t=205;
                break;
            case 'xx-large':
                t=206;
                break;
            default:
                t=201;
        }
      //  this.workbook.editFont(t);
    }
    modifyBorderStyle=(t)=>{
        //this.workbook.modifyBorderStyle(t);
    }
    mergeCells=()=>{
        //this.workbook.mergeCells();
    }
    splitCells=()=>{
       // this.workbook.splitCells();
    }
    goBack=()=>{
        window.history.back()
    }


    setFormat=()=>{
        //window.history.back()
    }




    //constant valueForPublicin="test111";

    render() {
       let _report_id=this.props.match.params.id;
       return (
            <Layout>
                <Content>
                    <div  style={{textAlign:1}}>
                        {/*<h>.....</h>*/}
                    </div>
                    <div>
                        <Tooltip title="save">
                            <Button   onClick={this.saveTable} icon={<SaveOutlined/>} />
                        </Tooltip>
                        <Tooltip title="FileAdd">
                            <Button  icon={<FileAddOutlined  />} />
                        </Tooltip>
                        <Tooltip title="copy">
                            <Button  icon={<CopyOutlined  />} />
                        </Tooltip>
                        <Tooltip title="copy">
                            <Button  icon={<CopyOutlined  />} />
                        </Tooltip>

                        <Select defaultValue="microYH" style={{ width: 120 }} onChange={this.handleFontChange}>
                            <Option value="microYH">微软雅黑</Option>
                            <Option value="st">宋体</Option>
                            <Option value="xst">新宋体</Option>
                            <Option value="ht">黑体</Option>
                            <Option value="fs">仿宋</Option>
                            <Option value="kt">楷体</Option>
                        </Select>

                        <Select defaultValue="medium" style={{ width: 120 }} onChange={this.handleFontSizeChange}>
                            <Option value="medium">medium</Option>
                            <Option value="small">small</Option>
                            <Option value="large">large</Option>
                            <Option value="x-small">x-small</Option>
                            <Option value="x-large">x-large</Option>
                            <Option value="xx-large">xx-large</Option>
                        </Select>

                        <Tooltip title="Bold">
                            <Button  icon={<BoldOutlined />}  onClick={() => this.editFont(2)}/>
                        </Tooltip>
                        <Tooltip title="Italic">
                            <Button  icon={<ItalicOutlined />}  onClick={() => this.editFont(3)}/>
                        </Tooltip>
                        <Tooltip title="Underline">
                            <Button  icon={<UnderlineOutlined />}   onClick={() => this.editFont(4)}/>
                        </Tooltip>

                        <Tooltip title="insertRow">
                            <Button  icon={<InsertRowAboveOutlined   />}  onClick={() => this.insertRow()} />

                        <Tooltip title="appendRow"></Tooltip>
                            <Button  icon={<InsertRowBelowOutlined/>}   onClick={() => this.appendRow()}/>
                        </Tooltip>
                        <Tooltip title="DeleteRow">
                            <Button  icon={<DeleteRowOutlined/>}   onClick={() => this.deleteRow()}/>
                        </Tooltip>


                        <Tooltip title="InsertRowLeft">
                            <Button  icon={<InsertRowLeftOutlined />}  onClick={() => this.insertCol()}/>
                        </Tooltip>
                        <Tooltip title="InsertRowRight">
                            <Button  icon={<InsertRowRightOutlined />}   onClick={() => this.appendCol()} />
                        </Tooltip>
                        <Tooltip title="DeleteColumn">
                            <Button  icon={<DeleteColumnOutlined />} onClick={() => this.deleteCol()}/>
                        </Tooltip>


                        <Tooltip title="AlignLeft">
                            <Button  icon={<AlignLeftOutlined/>}  onClick={() => this.align(1)}/>
                        </Tooltip>
                        <Tooltip title="AlignCenter">
                            <Button  icon={<AlignCenterOutlined/>}  onClick={() => this.align(2)}/>
                        </Tooltip>
                        <Tooltip title="AlignRight">
                            <Button  icon={<AlignRightOutlined/>}   onClick={() => this.align(3)}/>
                        </Tooltip>
                        <Tooltip title="TableOutlined">
                            <Button  icon={<TableOutlined />} onClick={() => this.modifyBorderStyle(2)}/>
                        </Tooltip>
                        <Tooltip title="cancelTableOutlined">
                            <Button  icon={<SmallDashOutlined />}  onClick={() => this.modifyBorderStyle(0)}/>
                        </Tooltip>
                        <Tooltip title="BorderTopOutlined">
                            <Button  icon={<BorderTopOutlined />} onClick={() => this.modifyBorderStyle(3)}/>
                        </Tooltip>
                        <Tooltip title="BorderRightOutlined">
                            <Button  icon={<BorderRightOutlined />} onClick={() => this.modifyBorderStyle(4)}/>
                        </Tooltip>
                        <Tooltip title="BorderBottomOutlined">
                            <Button  icon={<BorderBottomOutlined />} onClick={() => this.modifyBorderStyle(5)}/>
                        </Tooltip>
                        <Tooltip title="BorderLeftOutlined">
                            <Button  icon={<BorderLeftOutlined />} onClick={() => this.modifyBorderStyle(6)}/>
                        </Tooltip>
                        <Tooltip title="BorderOutlined">
                            <Button  icon={<BorderOutlined />}   onClick={() => this.mergeCells()}/>
                        </Tooltip>
                        <Tooltip title="DragOutlined">
                            <Button  icon={<DragOutlined />}   onClick={() => this.splitCells()}/>
                        </Tooltip>

                        <Tooltip title="formatData">
                            <Button  icon={<FormOutlined/>} onClick={() => this.openModal()}/>
                        </Tooltip>

                        <Tooltip title="viewReport">
                            <Link  key={"ttttt21"}
                                   to={ '/viewReport/'+this.props.match.params.id }
                            ><Button  icon={<FundViewOutlined/>}/></Link>
                        </Tooltip>




                        <Tooltip title="goback">
                            <Button  icon={<RollbackOutlined/>} onClick={() => this.goBack()}/>
                        </Tooltip>
                    </div>
                      <div  style={{position: "relative"}} >
                        {/*<Workbook onRef={this.workbookRef} reportId={_report_id} />*/}
                    </div>
                </Content>
                {/*<Footer>Footer</Footer>*/}

            </Layout>
        )
    }
}
